<template>
	<view class="search">
		<!-- #ifdef MP-WEIXIN -->
		<view class="nav_tab" :style="{ paddingTop: statusHeight+'px',lineHeight:statusHeight*2+'px'}">
			<view class="search_back" slot="left"><uni-icons type="arrowleft" size="22"></uni-icons></view>
			<view class="search_input">
				<input type="text" value="" placeholder="搜索药品、药店、症状" placeholder-class="input_text" />
				<uni-icons type="search" class="search_icon" size="18" color="#C0C0C0"></uni-icons>
			</view>
		</view>
		<!-- #endif -->		
		<view class="search_contion_histor">
			<view class="search_histor">
				<view class="search_histor_text"><text>历史搜索</text></view>
				<view class="" @click="eliminate()"><uni-icons type="trash"></uni-icons></view>
			</view>
			<view class="search_histor_contion"><uni-tag class="histor_item" v-for="(item, index) in historList" :key="index" :text="item.text" circle="true"></uni-tag></view>
		</view>
		<view class="search_contion_hot">
			<view class="search_hot">
				<view class="search_hot_text"><text>热门搜索</text></view>
			</view>
			<view class="search_hot_contion"><uni-tag class="hot_item" v-for="(item, index) in historList" :key="index" :text="item.text" circle="true"></uni-tag></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusHeight: null,
			historList: [
				{
					text: '标签内容'
				},
				{
					text: '当前选中项目'
				},
				{
					text: '标签内容'
				},
				{
					text: '标签'
				},
				{
					text: '标签内容'
				},
				{
					text: '标签内容标签内容'
				},
				{
					text: '标签内'
				},
				{
					text: '标签内容'
				},
				{
					text: '标签内容'
				},
				{
					text: '标签内容'
				},
				{
					text: '标签内容'
				}
			]
		};
	},
	onLoad() {
		this.getStatusHeight();
	},
	methods: {
		getStatusHeight() {
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.statusHeight = res.statusBarHeight;
				}
			});
		},
		eliminate() {
			console.log(111);
			uni.showModal({
				title: '',
				confirmColor: '#00B359',
				content: '确认清楚历史记录',
				success(res) {
					if (res.confirm) {
						console.log('确定');
					} else if (res.cancel) {
						console.log('取消');
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.nav_tab {
	display: flex;
	align-items: center;
}
.search_input {
	width: 60%;
	position: relative;
}
input {
	height: 72rpx;
	border: 1px solid #e5e5e5;
	border-radius: 20rpx;
	padding-left: 60rpx !important;
}
/deep/ .search_back {
	margin: 0px 14rpx;
}
/deep/ .search_icon {
	position: absolute;
	top: 0%;
	left: 4%;
}
/deep/ .input_text {
	font-size: 28rpx;
	opacity: 0.89;
	font-weight: 400;
}
//
.search_contion_histor,
.search_contion_hot {
	margin-top: 124rpx;
	padding: 0px 30rpx;
	.search_histor,
	.search_hot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.search_histor_text,
		.search_hot_text {
			color: #333333;
			font-weight: 500;
		}
	}
	.search_histor_contion,
	.search_hot_contion {
		display: flex;
		flex-wrap: wrap;
	}
	.histor_item,
	.hot_item {
		margin: 5px 3px !important;
	}
	/deep/.uni-tag {
		padding: 0px 11px !important;
	}
}

</style>
